<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50">
    <div class="max-w-md w-full mx-auto p-4">
      <UCard class="p-6 shadow-lg">
        <template #header>
          <h1 class="text-2xl font-bold text-center">注册</h1>
          <p class="text-gray-600 text-center mt-2">创建您的账户</p>
        </template>

        <form @submit.prevent="handleSignup" class="space-y-4">
          <div>
            <UFormGroup label="邮箱" required>
              <UInput
                v-model="email"
                type="email"
                placeholder="请输入您的邮箱"
                :error="errors.email"
                required
              />
            </UFormGroup>
          </div>

          <div>
            <UFormGroup label="密码" required>
              <UInput
                v-model="password"
                type="password"
                placeholder="请输入您的密码"
                :error="errors.password"
                required
              />
            </UFormGroup>
          </div>

          <div>
            <UFormGroup label="确认密码" required>
              <UInput
                v-model="confirmPassword"
                type="password"
                placeholder="请确认您的密码"
                :error="errors.confirmPassword"
                required
              />
            </UFormGroup>
          </div>

          <UAlert
            v-if="errorMessage"
            color="red"
            variant="soft"
            :title="errorMessage"
            class="mb-4"
          />

          <UAlert
            v-if="successMessage"
            color="green"
            variant="soft"
            :title="successMessage"
            class="mb-4"
          />

          <UButton
            type="submit"
            color="primary"
            block
            :loading="loading"
            :disabled="loading"
          >
            {{ loading ? "创建账户中..." : "注册" }}
          </UButton>
        </form>

        <template #footer>
          <div class="text-center">
            <p class="text-sm text-gray-600">
              已有账户？
              <NuxtLink
                to="/login"
                class="text-primary-500 hover:text-primary-600"
              >
                登录
              </NuxtLink>
            </p>
          </div>
        </template>
      </UCard>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const supabase = useSupabaseClient();
const user = useSupabaseUser();

const email = ref("");
const password = ref("");
const confirmPassword = ref("");
const loading = ref(false);
const errorMessage = ref("");
const successMessage = ref("");
const errors = ref({});

// 如果已登录则重定向
watch(
  user,
  (newUser) => {
    if (newUser) {
      navigateTo("/");
    }
  },
  { immediate: true }
);

/**
 * 处理用户注册
 * 验证用户输入并通过 Supabase 创建新账户
 */
async function handleSignup() {
  loading.value = true;
  errorMessage.value = "";
  successMessage.value = "";
  errors.value = {};

  // 验证
  if (!email.value) {
    errors.value.email = "邮箱是必填项";
    loading.value = false;
    return;
  }

  if (!password.value) {
    errors.value.password = "密码是必填项";
    loading.value = false;
    return;
  }

  if (password.value.length < 6) {
    errors.value.password = "密码至少需要6个字符";
    loading.value = false;
    return;
  }

  if (password.value !== confirmPassword.value) {
    errors.value.confirmPassword = "密码不匹配";
    loading.value = false;
    return;
  }

  try {
    const { error } = await supabase.auth.signUp({
      email: email.value,
      password: password.value,
    });

    if (error) {
      errorMessage.value = error.message;
    } else {
      successMessage.value = "账户创建成功！请检查您的邮箱以验证您的账户。";
      // 清空表单
      email.value = "";
      password.value = "";
      confirmPassword.value = "";
    }
  } catch (err) {
    errorMessage.value = "发生了意外错误";
    console.error(err);
  } finally {
    loading.value = false;
  }
}

// 设置页面元数据
definePageMeta({
  layout: false,
});
</script>
